<template>
	<view class="detail">
		<view class="detail-titleTag">
			<view class="detail-icon"></view>基础信息
		</view>
		<view class="detail-form">
			<view class="detail-form-item">
				<view class="detail-form-item-left">
					订单编号
				</view>
				<view class="detail-form-item-right">
					{{salesData.orderNo}}
				</view>
			</view>	
			<view class="detail-form-item">
				<view class="detail-form-item-left">
					客户名称
				</view>
				<view class="detail-form-item-right">
					{{salesData.buyerCompanyName}}
				</view>
			</view>
			<view class="detail-form-item">
				<view class="detail-form-item-left">
					下单时间
				</view>
				<view class="detail-form-item-right">
					2022-3-24 15:20:03
				</view>
			</view>
			<view class="detail-form-item">
				<view class="detail-form-item-left">
					订单评级
				</view>
				<view style="color: #fe9918;">
					{{salesData.priority}}
				</view>
			</view>
			<view class="detail-form-item">
				<view class="detail-form-item-left">
					订单状态
				</view>
				<view style="color: #fe9918;">
					{{convertTo(salesData)}}
				</view>
			</view>
			<view class="detail-form-item">
				<view class="detail-form-item-left">
					订单总额
				</view>
				<view style="color: red;">
					￥{{salesData.totalAmount}}
				</view>
			</view>	
			<view class="detail-form-item" v-if="salesData.sendTime">
				<view class="detail-form-item-left">
					计划出货时间
				</view>
				<view class="detail-form-item-right">
					{{salesData.sendTime}}
				</view>
			</view>	
		</view>
		<view class="detail-titleTag">
			<view class="detail-icon"></view>收货信息
		</view>
		<view class="detail-receivinginfo">
			<view class="detail-receivinginfo-left">
				<image class="icon" src="@/static/image/order/staff_icon.png"></image>
				<view class="detail-receivinginfo-left-box">
					<view>收货人：{{salesData.acceptUser}}</view>
					<view>手机号：{{salesData.acceptMobile}}</view>
					<view>详细地址：{{salesData.acceptAdds}}</view>
				</view>
			</view>
			<image class="icon" src="@/static/image/order/phone_icon.png"></image>
		</view>
		<view class="detail-titleTag">
			<view class="detail-icon"></view>客户采购员
		</view>
		<view class="detail-receivinginfo">
			<view class="detail-receivinginfo-left">
				<image class="icon" src="@/static/image/order/staff_icon.png"></image>
				<view class="detail-receivinginfo-left-box">
					<view>客户名称：{{salesData.buyerCompanyName}}</view>
					<view>采购员：{{salesData.buyerName}}</view>
				</view>
			</view>
		</view>
		<view class="detail-releaseRecord" @click="shipments" v-if="type == 'salesOrder'">
			<view class="detail-releaseRecord-left">
				<view class="detail-icon"></view>发货记录
			</view>
			<view class="detail-releaseRecord-right">
				共 {{salesData.deliveries.length}} 条 
				<image src="@/static/image/more_right_icon.png"></image>
			</view>
		</view>
		<view class="detail-titleTag">
			<view class="detail-icon"></view>货品清单
		</view>
		<view class="detail-orderInventory" v-for="item,index in salesData.materials" :key="item.id">
			<view class="detail-orderInventory-top" @click="materialOpen(item)">
				<view class="detail-orderInventory-top-image">
					<image :src="item.mainImage"></image>
				</view>
				<view class="detail-orderInventory-top-orderName">
					<view style="color: red;">{{item.materialShortName}}</view>
					<view>{{item.materialNo}}</view>
					<view>{{quality(item.param)}}</view>
					<view v-if="item.twoCount" style="color: #6d5ece;">{{item.materialUnit}} / {{item.twoUnit}}</view>
					<view v-else style="color: #6d5ece;">{{item.materialUnit}}</view>
				</view>
			</view>
			<view class="detail-orderInventory-center">
				<view class="detail-orderInventory-center-item">
					<view>订单数</view>
					<view style="color: #000000;" v-if="item.twoCount">{{item.materialCount}} {{item.materialUnit}} / {{item.twoCount}} {{item.twoUnit}}</view>
					<view style="color: #000000;" v-else>{{item.materialCount}} {{item.materialUnit}}</view>
				</view>
				<view class="detail-orderInventory-center-item">
					<view>期望到货时间</view>
					<view style="color: red;" v-if="item.expectedTime">{{item.expectedTime.split(' ')[0]}}</view>
				</view>
				<view class="detail-orderInventory-center-item">
					<view>备注</view>
					<view style="color: #000000;">{{item.remark}}</view>
				</view>
			</view>
			<view class="detail-orderInventory-bottom">
				<view>
					<view v-if="item.buttonLogo==0 || !item.buttonLogo" class="detail-orderInventory-bottom-enteringBtn" @click="planEnteringClick('entering',item)">
						计划录入
					</view>
					<view v-else class="detail-orderInventory-bottom-examineBtn" @click="planEnteringClick('view',item)">
						查看计划
					</view>
				</view>
				<view class="detail-orderInventory-bottom-viewBtn" @click="materialsInfo(item)">
					查看详情
				</view>
			</view>
		</view>
		<view>
			<button v-if="type == 'salesOrder'" type="primary" class="btn" @click="applyFor">申请发货</button>
			<view class="auditBtn" v-if="type == 'toAudit'&& convertTo(salesData) == '待审核'">	
				<view class="auditBtn-return" @click="auditBtn('return')">退回</view>
				<view class="auditBtn-pass" @click="auditBtn('pass')">通过</view>
			</view>
		</view>


	<!-- 退回弹窗 -->
	<view class="returnBox"> 
		<view :hidden="returnShow" class="popup_content">
			<view class="returnBox_close" @click="hideDiv('return')">关闭</view>
			<view class="popup_textarea_item">
				<textarea @input='returnProposalChange' :value="returnProposal" class="popup_textarea_item_textarea"  placeholder="请输入退回建议" />
				<view class="buttons">
					<button @click="confirmReturn">确定</button>
				</view>
			</view>
		</view>
		<view class="popup_overlay" :hidden="returnShow" @click="hideDiv('return')"></view>
	</view>

	<!-- 通过弹窗 -->
	<view class="passBox">
		<view :hidden="passShow" class="popup_content">
			<view class="passBox_title">项目信息</view>
			<view class="passBox_form">
				<view class="passBox_form_item">
					<view class="passBox_form_item_name">项目名称</view>
					<view class="passBox_form_item_value"><input v-model="passForm.projectName" type="text" placeholder="请输入项目名称"></view>
				</view>
				<view class="passBox_form_item">
					<view class="passBox_form_item_name">项目编号</view>
					<view class="passBox_form_item_value"><input v-model="passForm.projectNo"  type="text" placeholder="请输入项目编号"></view>
				</view>
				<view class="passBox_form_item">
					<view class="passBox_form_item_name">项目负责人</view>
					<view class="passBox_form_item_value" @click="selectPrincipal">
						<text v-if="principal.userName">{{principal.userName}}</text>
						<text v-else style="color: #8b8b8b;">请选择项目负责人</text>
					</view>
				</view>
				<view class="passBox_form_item">
					<view class="passBox_form_item_name">计划出货时间</view>
					<view class="passBox_form_item_value">
						<picker mode="date" :value="shipmentTime" @change="shipmentTimeChange">
							<view class="uni-input" v-if="shipmentTime">{{shipmentTime}}</view>
							<view class="uni-input" v-else style="color: #8b8b8b;">请选择计划出货时间</view>
						</picker>
					</view>
				</view>
			</view>
			<view class="passBox_button">
				<button class="passBox_button_close" @click="hideDiv('pass')">关闭</button>
				<button class="passBox_button_confirm" @click="confirmPass">确定</button>
			</view>
		</view>
		<view class="popup_overlay" :hidden="passShow" @click="hideDiv('pass')"></view>
	</view>


		<material v-if="materialType" :info="materialData" @close="materialClose"></material>
		
		<!-- 计划录入 -->
		<planEntering
		:isShow="show"
		:salesData="salesData"
		:materialData="materialData"
		:popUpType="popUpType"
		@closePopUp="closePopUp"
		@anewRequest="anewRequest"
		@compile="compile"
		@cancelCompile="cancelCompile"
		></planEntering>
	</view>
</template>

<script>
	import material from '@/subcontractList/order/purchase/component/dialog/material';
	import planEntering from './planEntering.vue';
	import * as api from '@/utils/api.js';
	export default {
		components:{
			material,
			planEntering
		},
		data() {
			return {
				show:false,
				popUpType:'',
				type:'',
				Id:'',
				materialData:{},
				materialType:false, // 物料信息弹窗显示状态
				salesData:{},
				returnShow:true,
				passShow:true,
				feedbackContent:'',
				returnProposal:'', // 退回建议
				principal:{}, // 负责人
				shipmentTime:'',
				passForm:{
					projectName:'',
					projectNo:'',
				}
			}
		},
		onLoad(option) {
			this.type = option.type
			this.Id = option.id
			this.getInfo()
			getApp().globalData.personList.assignment = {};
		},
		onShow(){
			let { assignment } = getApp().globalData.personList
			this.principal = assignment
		},
		methods: {
			getInfo(){
				api.getOrderSales(this.Id).then(res=>{
					if(res.code == 0){
						this.salesData = res.data
					}
				})
			},
			closePopUp(){
				this.show = false
				this.popUpType = ''
			},
			compile(){ // 点击编辑
				this.popUpType = ''
			},
			cancelCompile(){// 点击取消编辑
				this.popUpType = 'view'
			},
			anewRequest(){
				this.getInfo()
			},
			hideDiv(type){  // 隐藏弹窗
				if(type == 'return'){
					this.returnShow = true
					this.returnProposal = ''
				}else{
					this.passShow = true
				}
			},
			auditBtn(type){ // 显示弹窗
				if(type == 'return'){ 
					this.returnShow = false
				}else{
					this.passShow = false
				}
			},
			confirmReturn(){ // 退回按钮
				if(!this.returnProposal){
					return  uni.showToast({
								title:'请输入退回建议',
								icon:'none',
								duration: 2000
							});	
				}
				let data = {
					id:this.salesData.id,
					materialCount:this.salesData.materials.length,
					remark:this.returnProposal
				}
				api.orderReturn(data).then(res=>{
					if(res.code == 0){
						this.hideDiv('return')
						uni.navigateBack();
						uni.showToast({
							title:'退回成功',
							icon:'none',
							duration: 2000
						});
					}
				})
			},
			returnProposalChange(e){
				this.returnProposal = e.detail.value
			},
			shipmentTimeChange(e){ // 出货时间
				this.shipmentTime = e.detail.value
			},
			confirmPass(){ // 通过按钮
				this.passForm.projectLeader = this.principal.userName
				this.passForm.projectLeaderId = this.principal.id
				if(!this.passForm.projectName){
					return  uni.showToast({
								title:'请输入项目名称',
								icon:'none',
								duration: 2000
							});	
				}
				if(!this.passForm.projectNo){
					return  uni.showToast({
								title:'请输入项目编号',
								icon:'none',
								duration: 2000
							});	
				}
				if(!this.passForm.projectLeaderId){
					return  uni.showToast({
								title:'请选择项目负责人',
								icon:'none',
								duration: 2000
							});	
				}
				if(!this.shipmentTime){
					return  uni.showToast({
								title:'请选择计划出货时间',
								icon:'none',
								duration: 2000
							});	
				}
				let idAndTime = this.salesData.id + '/' + this.shipmentTime
				api.orderPass(idAndTime,this.passForm).then(res=>{
					if(res.code == 0){
						this.hideDiv('pass')
						uni.navigateBack();
						uni.showToast({
							title:'设置成功',
							icon:'none',
							duration: 2000
						});	
					}
				})
			},
			selectPrincipal(){ // 选择人员
				let url = "/pages/initiate/personnel/personnel?selectedType=radio"
				uni.navigateTo({
					url
				});
			},
			shipments(){ // 发货记录
				let orderNo = this.salesData.orderNo
				this.salesData.deliveries.forEach(item=>{
					item.orderNo = orderNo
				})
				uni.navigateTo({
					url: `/subcontractList/order/salesAdmin/salesOrder/deliverGoods/shipmentsRecord?list=${encodeURIComponent(JSON.stringify(this.salesData.deliveries))}`
				});					
			},
			materialsInfo(item){ // 跳转查看详情
				uni.navigateTo({
					url: `/subcontractList/order/salesAdmin/salesOrder/details/materialsInfo?item=${encodeURIComponent(JSON.stringify(item))}`
				});
			},
			applyFor(){
				let that = this
				uni.showModal({
				    content: '确认要发货么？',
				    success: function (res) {
				        if (res.confirm) {
							uni.navigateTo({
								url: `/subcontractList/order/salesAdmin/salesOrder/details/orderDeliverGoods?item=${encodeURIComponent(JSON.stringify(that.salesData))}`
							});
				        }
				    }
				});
			},
			materialOpen(item){
				this.materialType = true;
				this.materialData = item
			},
			materialClose(){
				this.materialType = false;
			},
			planEnteringClick(type,item){
				this.materialData = item
				this.show = true
				if(type == 'view'){
					this.popUpType = 'view'
				}
			},
			convertTo(item){
				if(!item.status && item.deleted == 0){
					return '待审核'
				}else if(!item.status && item.deleted == 1){
					return '退回'
				}else{
					return '通过'
				}
			},
			quality(item){
				let obj = JSON.parse(item)
				let objKey = []
				for(let i in obj){
					objKey.push(i + ":" + obj[i] + '/')
				}
				let value = objKey.join().replace(/,/g,'')
				return value.substring(0, value.length - 1)
			}
		}
	}
</script>

<style lang="scss" scoped>
.detail{
	min-height: 100vh;
	background-color: #eaeaea;
	padding-bottom: 20rpx;
	&-titleTag,&-releaseRecord{
		display: flex;
		align-items: center;
		font-weight: 700;
		padding: 10rpx 0;
		font-size: 34rpx;
		.detail-icon{
			width: 8rpx;
			height: 30rpx;
			margin: 0 15rpx;
			background-color: #30a875;
		}
	}
	&-releaseRecord{
		margin-top: 25rpx;
		background-color: #fff;
		justify-content: space-between;
		&-left,&-right{
			display: flex;
			align-items: center;
		}
		&-right{
			font-size: 26rpx;
			margin-right: 20rpx;
			image{
				width: 30rpx;
				height: 30rpx;
			}
		}
	}
	&-form{
		line-height: 80rpx;
		padding: 10rpx 20rpx;
		background-color: #fff;
		&-item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx solid #f5f5f5;
			&-left{
				color: #939393;
			}
		}
		&-item:last-child{
			border-bottom: none;
		}
	}
	&-receivinginfo{
		padding: 20rpx 15rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		.icon{
			width: 80rpx;
			height: 80rpx;
		}	
		&-left{
			display: flex;
			align-items: center;
			&-box{
				margin-left: 8rpx;
				font-size: 24rpx;
				color: #939393;
			}
		}
	}
	&-orderInventory{
		margin: 0 20rpx;
		padding: 20rpx;
		border-radius: 15rpx;
		background-color: #fff;
		box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
		&-top{
			display: flex;
			&-image{
				width: 120rpx;
				height: 120rpx;
				margin-right: 20rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
		&-center{
			margin-top: 20rpx;
			padding-bottom: 20rpx;
			border-bottom: 2rpx solid #f5f5f5;
			&-item{
				color: #939393;
				line-height: 45rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}
		&-bottom{
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			&-enteringBtn,&-viewBtn{
				color: #30a875;
				margin-top: 20rpx;
				padding: 15rpx 10rpx;
				border: 2rpx solid #30a875;
			}
			&-enteringBtn,&-examineBtn{
				color: #fff;
				background-color: #409eff;
				border: none;
				padding: 15rpx 12rpx;
				border-radius: 12rpx;
			}
			&-examineBtn{
				color: #57a9ff;
				background-color: #edf5ff;
			}
		}
	}
	.btn{
		margin:80rpx 20rpx 20rpx;
		background-color: #30a875;
	}
	.auditBtn{
		padding:0 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 80rpx;
		&-pass,&-return{
			width: 46%;
			color: #fff;
			background-color: #30a875;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			padding: 18rpx 0;
			justify-content: center;
		}
		&-return{
			background-color: #fa1209;
		}
	}
	
	
	
	
		.returnBox{  // 退回弹窗
			.popup_overlay {
				position: fixed;
				top: 0%;
				left: 0%;
				width: 100%;
				height: 100%;
				background-color: black;
				z-index: 1001;
				-moz-opacity: 0.8;
				opacity: .80;
				filter: alpha(opacity=88);
			}
			
			.popup_content {
				padding: 20rpx;
				position: fixed;
				top: 50%;
				left: 50%;
				height: 495rpx;
				margin-left: -332rpx;
				margin-top: -270rpx;
				background-color: white;
				z-index: 1002;
				overflow: auto;
			}
			&_close{
				float: right;
			}
			
			.popup_textarea_item {
				padding-top: 5rpx;
				height: 50rpx;
				margin: 20rpx;
				&_textarea{
					padding: 20rpx;
					background: #eee;
					margin-top: 32rpx;
				}
			}
			.buttons{
				margin-top: 40rpx;
				button{
					background-color: #4576e4;
					font-size: 28rpx;
					color: #fff;
				}
			}
		}
		
		.passBox{
			.popup_overlay {
				position: fixed;
				top: 0%;
				left: 0%;
				width: 100%;
				height: 100%;
				background-color: black;
				z-index: 1001;
				-moz-opacity: 0.8;
				opacity: .80;
				filter: alpha(opacity=88);
			}
			
			.popup_content {
				width: 80%;
				padding: 20rpx;
				position: fixed;
				top: 26%;
				left: 7%;
				background-color: white;
				z-index: 1002;
			}
			&_title{
				text-align: center;
				font-weight: 700;
			}
			&_form{
				margin: 50rpx 0;
				border: 1rpx solid #e0e2e9;
				&_item{
					height: 86rpx;
					line-height: 86rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1rpx solid #e0e2e9;
					&_name{
						width: 40%;
						text-align: center;
						border-right: 1rpx solid #e0e2e9;
					}
					&_value{
						width: 60%;
						text-align: center;
					}
				}
			}
			&_button{
				display: flex;
				align-items: center;
				justify-content: space-between;
				&_close,&_confirm{
					width: 45%;
					height: 60rpx;
					color: #fff;
					background-color: #30a875;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				&_close{
					background-color: #afafaf;
				}
			}
		}
		
		
		
			
	

}
</style>
